<template>
  <div class="login-box">
    <!-- logo -->
    <div class="top-box">
      <div class="top-div"><img src="../../assets/image/logo.png" alt="" /></div>
      <p class="top-title">金融融资平台，全程为您服务</p>
    </div>
    <!-- 中间登陆 -->
    <div class="middle-box">
      <div class="div-bottom">
        <div class="span-info">登录</div>
        <input type="text" placeholder="请输入手机号" v-model="user.mobile">
      </div>
      <div class="div-bottom">
        <div class="span-info">密码</div>
        <input type="password" placeholder="请输入密码" v-model="user.password">
      </div>
      <div class="other-reg">
        <div class="cursor">
          <router-link to="/register">手机号注册</router-link>
        </div>
        <div class="cursor">
          <router-link to="/setPwdSpeed_1">忘记密码？</router-link>
        </div>
      </div>
    </div>
    <!-- 下部按钮 -->
    <div class="bottom-box">
      <div>
        <button class="button1" @click="login">立即登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { sendCode, logon, Login } from "api/Login";
import { getUserDetails } from "api/User"
export default {
  data(){
    return{
      user:{
        mobile:'',
        password:'',
      },
    }
  },
  methods:{
    login() {
      let { mobile, password } = this.user;
      Login({ openId: localStorage.openId, mobile, password  }).then(({ data: { token } }) => {
        if (token) {

          getUserDetails().then(({ data: res }) => {
            localStorage.userInfo = JSON.stringify(res);
          });
          localStorage.token = token;
          localStorage.isLogin = true
          this.$router.push("/");
        }
      })
    }
  }
};
</script>

<style lang="stylus" scoped>
@import "../../assets/styl/mixin.styl"
.cursor
  cursor pointer
  a
    color #2f54eb
.login-box
    box-sizing border-box
    padding 0 rem(15)
    .top-box
        display flex
        flex-direction column
        justify-content center
        .top-div
            width rem(164)
            margin rem(45) auto rem(15)
            img 
                width 100%
                height 100%
        .top-title
            font-size rem($ft14)
            color $fontColor
            fontCenter()
    .middle-box
      margin-top rem(25)
      .span-info
        color $titleColor
        font-size rem($ft16)
        margin-right rem(15)
      .div-bottom
        box-sizing border-box
        padding rem(15) 0 rem(4)
        display flex
        align-items center
        border-bottom rem(1) solid $borderColor
        input
          width 75%
          line-height rem(40)
          font-size rem($ft16)
          color $titleColor
      .other-reg
        display flex
        justify-content space-between
        div
          color $baseColor
          font-size rem($ft14)
          padding-top rem(16)
    .bottom-box
      margin-top rem(68)
      button 
        width rem(345)
        height rem(49)
        border-radius rem(5)
        color white
        font-size rem(16)
      .button1
        background $baseColor
</style>
